<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Image processing algorithm as a service</title>
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/themes/redmond/skin.css" />
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/themes/custom.css" />
    </h:head>
    <h:body>
        <h:form prependId="false">
            <p:layout style="width:1000px; min-height:650px; margin-left: auto; margin-right: auto;">

                <p:layoutUnit position="top" height="172" header="Load images" collapsible="true" gutter="4px">
                    <p:graphicImage width="130" height="130" value="#{index.image1}" id="gi1" cache="false"/>
                    <p:fileUpload id="fu1" fileUploadListener="#{index.handleFileUpload1}" auto="true" allowTypes="*.jpg;*.png;" description="First image" update="gi1 message"/>

                    <p:graphicImage width="130" height="130" value="#{index.image2}" id="gi2" cache="false"/>
                    <p:fileUpload id="fu2" fileUploadListener="#{index.handleFileUpload2}" auto="true" allowTypes="*.jpg;*.png;" description="Second image" update="gi2 message"/>
                </p:layoutUnit>

                <p:layoutUnit position="center" header="Result image" gutter="4px" scrollable="true" id="lu2">
                    <p:graphicImage value="#{index.resultImage}" id="gi3" cache="false" rendered="#{index.resultRendered}"/>
                </p:layoutUnit>

                <p:layoutUnit position="bottom" height="85" collapsible="true" gutter="4px" id="lu3">
                    <div id="btnPanel">
                        <p:commandButton value="Join by Columns" id="btnCol" action="#{index.joinByColumns}" update="message lu2 lu3 fd"/>
                        <p:commandButton value="Download image" id="btnDwn" rendered="#{index.resultRendered}" ajax="false">
                            <p:fileDownload value="#{index.image2}" id="fd"/>
                        </p:commandButton>
                        <p:commandButton value="Join by Rows" id="btnRow" action="#{index.joinByRows}" update="message lu2 lu3 fd"/>
                    </div>
                </p:layoutUnit>

            </p:layout>
            <p:growl id="message" showDetail="true"/>
        </h:form>
    </h:body>
</html>

